<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>商品管理</title>

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 

</head>
<body>
<!-- <form class="layui-form" action=""> -->
<!-- <div class="demoTable" id="toolbarDemo1">
  编号：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="pgid" autocomplete="off">
  </div>
  套餐标题：
   <div class="layui-inline">
    <input class="layui-input" name="comboTitle" id="comboTitle" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload">搜索</button>
</div> -->
<!-- @*Table表格层*@ -->
<!-- @*创建一个table实例   在页面放置一个元素 ，然后通过 table.render() 方法指定该容器 -->
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- </form> -->

<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>



<!-- 工具栏 -->
<script type="text/html" id="toolbarDemo">
  
<div class="layui-btn-container"  style="float:right;">
		<button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="getCheckData">去结算</button>
	</div>
 <!-- 编号：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="pgid" autocomplete="on">
  </div>
  套餐标题：
   <div class="layui-inline">
    <input class="layui-input" name="comboTitle" id="comboTitle" autocomplete="on">
  </div>
  <button class="layui-btn"  id="search" data-type="reload">搜索</button>
</div>
<div> -->


</script>

<!-- @*工具栏  在Table中使用 toolbar声明一个 Id  放置在任意位置皆可*@ -->
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" id="btn">删除</a>
</script>
<script type="text/html" id="barDemo1">
	 <input class="layui-input" name="inputnum" id="inputnum" value="1" autocomplete="on">
</script>
<!-- 表格数据的商品状态列显示值转换 -->             
<script type="text/html" id="statetemplet">
{{# if(d.state=="1"){"已付款"}}
<span style="color:chocolate;">{{"已付款"}}</span>
{{# } else {"未付款"}}
<span style="color:black;">{{"未付款"}}</span>
{{#　}}}
</script>  

 
<script>
//创建实例  要想数据初始化 这里必须要写
layui.use(['table', 'layer', 'form','jquery'], function () {
	var table = layui.table;
	layer = layui.layer;
	form = layui.form;
	$=layui.jquery;
	TableInit();
	//表格内容
	function TableInit(){ 
	table.render({
		elem: '#test'  //表格容器的id
		,url:'showOrder.do'  
			//接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量
		,even: true  //隔行换色，默认false不开启
		,toolbar: '#toolbarDemo'
		,title: '商品信息数据表'
		,cols: [[
			/* {type: 'checkbox', fixed: 'left'} 
			,*/ {field:'id', title:'商品编号', width:100, fixed: 'left', unresize: true, sort: true}
			/*,{field:'oid', title:'商品名称', width:180, edit: 'text'}
			,{field:'uid', title:'市场价/元', width:100, edit: 'text', sort: true}
			,{field:'ordertime', title:'优惠价/元', width:100, sort: true} */
			,{field:'type', title:'套餐类型',width:86, sort: true  }
			,{field:'money', title:'金额', width:200, sort: true}
			,{field:'packageid', title:'套餐id', width:200, sort: true, }
			,{field:'packagecount', title:'套餐数量', toolbar: '#barDemo1',width:200}
			,{field:'state', title:'状态', width:150,templet:"#statetemplet"}
			/* ,{field:'savetime', title:'更新时间', width:160, sort: true, templet:"<div>{{layui.util.toDateString(d.savetime, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
			 */,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
			]]
		,page: true  //开启分页
		
		,limit: 10  //设置一页数据数量
		,limits: [5,10,15,20,'${res.count }'] //设置分页选项
		,request: {  //请求的参数
			pageName: 'page' //页码的参数名称，默认：page
		    ,limitName: 'limit' //每页数据量的参数名，默认：limit
		}  
		,response: {  //自定义返回的数据格式
			statusName: 'code' //规定数据状态的字段名称，默认：code
			,statusCode: 0 //规定成功的状态码，默认：0
			,msgName: 'msg' //规定状态信息的字段名称，默认：msg
			,countName: 'count' //规定数据总数的字段名称，默认：count
			,dataName: 'data' //规定数据列表的字段名称，默认：data
		} 
	});
	}

	search();
	//搜索 ----------------------------------------------- Begin-----------------------------------------------------------
	function search(){
	var $ = layui.$, active =
	  {
	      reload: function () {
	          var pgid = $("input[name='id']").val();//获取输入框的值
	         
	          var comboTitle=$("input[name='comboTitle']").val();
	          //执行重载
	          table.reload('test',{
	          	page: {curr: 1 }  //重新从第 1 页开始
	            , where: { 
	            	pid: pgid,
	            	pname:comboTitle
	            	}  //向后台传参  
	            , url: 'showOrder.do'  //后台做模糊搜索接口路径
	            , method: 'post'
	          });
	      }
	  };
	//这个是用于创建点击事件的实例
	$('#search').on('click', function (){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : ''; 
	});
	}
	//搜索 ----------------------------------------------- End-----------------------------------------------------------
		
	//头工具栏事件
	table.on('toolbar(test)', function(obj){
		
		
		var checkStatus = table.checkStatus(obj.config.id);
		switch(obj.event){
		case 'getCheckData':{  
	    	$.ajax({
	    		url:"<%=basePath%>buy.do",//接口
	            type:'post',//method请求方式，get或者post
	            success: function(res){//res为相应体,function为回调函数
	            	if (res == 1) {
	    				//layer.msg(res.msg, { icon: 1, time: 1500 });
	    				layer.alert("成功购买",{ icon: 1, time: 1500 });
	    	            //layer.close(index);  //关闭弹窗
	    			} else{
	    				//layer.msg(res.msg, { icon: 2, time: 1500 });
	    				layer.alert("购买失败",{ icon: 2, time: 1500 });
	    			}
	            },
	            error: function(){
	            	layer.msg("操作失败", { icon: 2 });
	            } 
	    	}); 
	    }
			
			layer.alert("购买成功");
			break;
		case 'search':
			search();
			break;
		}
	}); 
	
	
	//监听工具条 ----------------------------------------------- Begin-----------------------------------------------------------
	table.on('tool(test)', function (obj) {    //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    var data = obj.data; //获得当前行数据
	    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	    var tr = obj.tr; //获得当前行 tr 的DOM对象 
	    
	    if (layEvent=='del')<%-- {  
	    	$.ajax({
	    		url:"<%=basePath%>delshopping.do",//接口
	            type:'post',//method请求方式，get或者post
	            dataType:'json',//预期服务器返回的数据类型
	            data:JSON.stringify(data),//表格数据序列化
	            contentType: "application/json; charset=utf-8",  
	            success: function(res){//res为相应体,function为回调函数
	            	if (res == 1) {
	    				//layer.msg(res.msg, { icon: 1, time: 1500 });
	    				layer.alert("成功添加购物车",{ icon: 1, time: 1500 });
	    	            //layer.close(index);  //关闭弹窗
	    			} else{
	    				//layer.msg(res.msg, { icon: 2, time: 1500 });
	    				layer.alert("添加失败",{ icon: 2, time: 1500 });
	    			}
	            },
	            error: function(){
	            	layer.msg("操作失败", { icon: 2 });
	            } 
	    	}); 
	    } --%>
	    
	    {//删除数据
		  	  layer.confirm('确认删除当前商品吗？', function(index){
		         //删除数据在这里可以使用Ajax异步  就和平常使用一样简单
		         $.post("<%=basePath%>delshopping.do", { id: data.id }, function (res){
		             if (res == "1") {
		            	
		                 layer.msg(res.msg, { icon: 1, time: 1500 }, function () {
		                	 layer.alert("删除成功",{ icon: 1, time: 1500 });
		                	 obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
		                     $(".layui-laypage-btn").click();
		                 });
		                 //layer.close(index);  //关闭弹窗
		             } else {
		                 layer.msg(res.msg, { icon: 2, time: 1500 });
		             }
		         });
		  	  });
		    }
    });
	    	
	//监听工具条 ----------------------------------------------- ENd-----------------------------------------------------------
	 
});

</script>

</body>
</html>